<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表问题</title>
    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/index.css" rel="stylesheet" type="text/css">  <link type="text/css" rel="stylesheet" href="/js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" />
    <link href="/js/plugins/chosen/chosen.css" rel="stylesheet" type="text/css">
    <link href="/js/plugins/datepicker/datepicker.css" rel="stylesheet">
    <link href="/js/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <link href="/styles/communityInput.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/ueditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/js/ueditor/umeditor.min.js"></script>
    <script type="text/javascript" src="/js/plugins/chosen/chosen.jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
    <script type="text/javascript" src="/js/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="/js/system/index.js"></script>
    <style>
        .on{
            border:#ff9d00;
            background-color:#ff9d00;
        }

    </style>
</head>

<script>
        $(function () {
        // 初始化富文本编辑器
        ue = UM.getEditor('editor', {
        textarea: "content", //表单文本域的name
        imageUrl: "/question/contentImage",//图片上传路径
        imageFieldName: "upfile",
        imagePath: ''
        });

        //目的地
        $("#region").chosen();

        $(function () {

            $(".chose_pic").click(function () {
                $("#coverBtn").click();
            });
            $("#coverBtn").change(function () {
                if(this.value){
                    $("#coverForm").ajaxSubmit(function (data) {
                        $(".choseBtn").html(" + 重新选择");
                        $("#coverImage").attr("src", "/" +data);
                        $("#coverValue").val("/" + data);
                    })
                }
            });


            $("._j_interest").click(function () {
                if ($(this).hasClass("on")) {
                    $(this).removeClass("on");
                } else {
                    $(this).nextAll().each(function (index,ele) {
                        $(ele).removeClass("on");
                    });
                    $(this).prevAll().each(function (index,ele) {
                        $(ele).removeClass("on");
                    });
                    $(this).addClass("on");
                }
            });
            //判断输入框的字符串长度是否满足条件,如果不满足就提示用户
            $("._j_title").change(function () {
                if($(this).val().length<10){
                    alert("最少输入10个字");
                }
            })
        });

        //发布问题
        $("._j_publish").click(function () {
            //标题
            var title = $("._j_title").val();
            console.log(title);
            //内容
            var content = ue.getContent();
            console.log(content);
            //目的地
            var destId = $("#dest").val();
            console.log(destId);
            //标签
            var tagId = $(".on").data("id");
            console.log(tagId);
            $("#tagId").val(tagId);
        });
    })
</script>
<body style="position:relative;">
<#include "../common/navbar.ftl"/>
<div class="qt-container clearfix">
    <!--文件上传-->
<#--    <form action="/travel/coverImageUpload" method="post" id="coverForm">
        <input type="file" name="pic" id="coverBtn" style="display: none;">
    </form>-->


    <!-- 提问主要内容 -->
    <div class="qt-main">
        <!-- 面包屑导航 -->
        <div class="crumb">
            <a href="/question/index">旅游问答</a> &gt; <span>我要提问</span>
        </div>
        <form action="/question/save" method="post" id="saveForm">
        <!-- 问题标题 -->
        <div class="qt-tit">
            <h5>问题标题</h5>
            <div class="wordSumTotal">
                <input type="text" name="title" placeholder="标题不小于10字哦" class="_j_title" minlength="10" maxlength="80">
                <span class="count"><span class="_j_title_num">0</span>/80 字</span>
                <span class="_j_min_num hide">10</span>
                <span class="error err-tips _j_title_error hide"></span>
            </div>
        </div>

        <!-- 问题详细内容 -->
        <div class="qt-details" id="_qa_detail">

            <script>
                $(function () {
                    $("#_j_show_content").click(function () {
                        if ($(".cf").hasClass("xs")) {
                            $(".cf").removeClass("xs").css("display", "none")
                        } else {
                            $(".cf").addClass("xs").css("display", "block")
                        }
                    })
                })
            </script>

            <h5><a title="添加问答内容" class="icon" id="_j_show_content"></a>问题详细内容</h5>
            <dl class="body cf" style="display: none">
                <dd id="content_div">
                    <script id="editor" type="text/plain" style="width:700px;height:500px;"></script>
                </dd>
            </dl>
      <#--      <dl class="body cf" style="display: none">
                <dd id="content_div"><script id="editor" type="text/plain" style="width:700px;height:500px"></script></dd></dl>-->
        </div>
         <#--   <h5>选择目的地</h5>
            <div class="pi-dropdown "style="text-align: left" >
                <select name="dest.id" data-placeholder="请选择目的地" id="region" style="width: 150px;">
                    <option value="-1">请选择目的地</option>
                </select>
            </div>-->
            <select name="dest.id" data-placeholder="请选择目的地" id="dest" style="width: 150px;">
                <option value="-1">请选择目的地</option>
                <#list dests as h>
                    <option value="${h.id}">${h.name}</option>
                </#list>
            </select>
            <div class="qt-interest _qa_block" id="_qa_interest">
                <h5>选择兴趣标签</h5>
                <div class="qt-con _j_interest_list">
                    <dl class="interest-description">
                        <dt><i></i><span>什么是兴趣标签</span></dt>
                        <dd>兴趣标签是一个问题的类型，它有助于为你的问题匹配擅长该类问题的蜂蜂回答。目前仅开放了以下几个话题，更多类型我们会逐步开放。</dd>
                    </dl>
                    <div class="interest-tags">
                        <#list questionTags as t>
                            <a class="btn-interest _j_interest" data-id="${t.id}"><i></i>${t.name}</a>
                        </#list>
                        <input id="tagId" name="tag.id" value="" type="hidden">
                    </div>
                </div>
            </div>
          <!-- 发布按钮 -->
            <div class="publish_question">
              <#--  <a class="qt-post-btn _j_publish" title="发布问题">发布问题</a>-->
                <input type="submit" value="发布问题" class="qt-post-btn _j_publish">
            </div>
        </div>
    </form>
    <!-- 提问侧边栏 -->
    <div class="qt-sider">
        <div class="qts-tit">提问的正确姿势</div>
        <div class="qts-con">
            <p>1.问题要【具体】【真实】【诚恳】，问题较多，需全面阐述时，可以添加问题补充。结伴/交易/与旅行无关的提问将被删除。</p>
            <p>2.给问题添加目的地，并打上正确的标签将有助于更快地获得回答。</p>
        </div>
    </div>
    <div class="mfw-toolbar" id="_j_mfwtoolbar" style="display: block;">
        <div class="toolbar-item-top" style="display: none;">
            <a role="button" class="btn _j_gotop">
                <i class="icon_top"></i>
                <em>返回顶部</em>
            </a>
        </div>
        <div class="toolbar-item-feedback">
            <a role="button" data-japp="feedback" class="btn">
                <i class="icon_feedback"></i>
                <em>意见反馈</em>
            </a>
        </div>
        <div class="toolbar-item-code">
            <a role="button" class="btn">
                <i class="icon_code"></i>
            </a>
            <a role="button" class="mfw-code _j_code">
                <img src="https://p1-q.mafengwo.net/s1/M00/6C/51/wKgIC1t_6TuASybrAADGUPUHjr021.jpeg?imageMogr2%2Fthumbnail%2F%21450x192r%2Fgravity%2FCenter%2Fcrop%2F%21450x192%2Fquality%2F90"
                     width="450" height="192">
            </a>
        </div>
    </div>
</div>
<#include "../common/footer.ftl"/>
</body>
</html>